﻿@model MvcCaja.Dal.Models.Cuenta
@{
    ViewBag.Title = "PagoCuenta";
    Layout = "~/Views/Shared/_Layout.cshtml";
    Decimal dTipoCambio = Decimal.Parse(Session["TipoCambio"].ToString());
    Decimal dIGV = Decimal.Parse(Session["IGV"].ToString());
}

<script type="text/javascript">

    function roundNumber(rnum, rlength) {
        return newnumber = Math.round(rnum * Math.pow(10, rlength)) / Math.pow(10, rlength);
    }

    function validarPago()
    {
        if(varMontoPagado < varMontoTotal) {
            alert("Los montos ingresados no cubren el total de la cuenta. Por favor, corregir.");
            return false;    
        }

        if (vtxtMontoVisa > 0 && !isValidCreditCard ("Visa",$("#txtNumeroVisa").val())) {
            alert("El número de tarjeta Visa no es válido. Por favor, corregir.");
            return false;
        }
            
        if (vtxtMontoMastercard > 0 && !isValidCreditCard ("MC",$("#txtNumeroMastercard").val())) {
            alert("El número de tarjeta MasterCard no es válido. Por favor, corregir.");
            return false;
        }

        return true;
    }

    //Variables de pagina
    var varIGV = @dIGV;
    var varTC = @dTipoCambio;
    var varMontoCuenta = @Model.Total;
	var varMontoTotal = @Model.Total;
    var varMontoPagado = 0;

    //Montos por tipo de pago

    var vtxtMontoSoles = 0;
    var txtMontoDolares = 0;
    var vtxtMontoVisa = 0;
    var vtxtMontoMastercard = 0;

    $(document).ready(function () {


        $("#dialogCupon").dialog({
            autoOpen: false,
            height: 250,
            width: 400,
            modal: true,
            close: function () {
                
            }
        });

        $("#btnValCupon").click(function(){

            var sPath = "@(Url.Action("Cupon") + "?CodigoCupon=")" + $('#txtCupon').val();

            $.getJSON(sPath,
            function(data) {

                if (data.IdCupon == "-1")
                {
                    alert(data.CondicionesCupon);
                    return;
                }
                
                var date = new Date(parseInt(data.FechaExpiracion.substr(6)));

                $("#fe").text(date.getUTCDate() + "/" + (date.getUTCMonth() + 1) + "/" + date.getUTCFullYear());
                $("#de").text(data.Descuento);
                $("#es").text(data.CondicionesCupon);
                $("#valcupon").val(data.IdCupon);
                $("#descuento").text(data.Descuento);

                Calular();

                $("#btnCupon").val("Quitar Cupón");

            });
        });

        $("#btnCupon").click(function() {
            if ($("#btnCupon").val() == "Cupón")
            {
                $( '#dialogCupon' ).dialog( 'open' );
            }
            else
            {
                $("#fe").text("");
                $("#de").text("0");
                $("#es").text("");
                $("#valcupon").text("");
                $("#descuento").text("0.00");

                $("#btnCupon").val("Cupón");

                Calular();
            }
        });

        var Calular = function () {

            vtxtMontoSoles = $("#txtMontoSoles").val();
            txtMontoDolares = $("#txtMontoDolares").val();
            vtxtMontoVisa = $("#txtMontoVisa").val();
            vtxtMontoMastercard = $("#txtMontoMastercard").val();

            if(vtxtMontoSoles == "") { vtxtMontoSoles = 0; }
            if(txtMontoDolares == "") { txtMontoDolares = 0; }
            if(vtxtMontoVisa == "") { vtxtMontoVisa = 0; }
            if(vtxtMontoMastercard == "") { vtxtMontoMastercard = 0; }

            var vardescuentopor = parseFloat($("#descuento").text(), 10);

            varMontoTotal = varMontoCuenta * (((100 - vardescuentopor) / 100));

            var varSoles = parseFloat(vtxtMontoSoles, 10) + parseFloat(vtxtMontoVisa, 10) + parseFloat(vtxtMontoMastercard, 10);
            var varDolares = parseFloat(txtMontoDolares, 10);
            var varTotal = roundNumber(varSoles + (varDolares * varTC),2);

            $("#soles").text(varSoles);
            $("#dolares").text(varDolares);

            $("#subtotal").text(roundNumber(varTotal*(1 - varIGV),2));
            $("#igv").text(roundNumber(varTotal * varIGV, 2));
            

            if (varTotal > varMontoTotal) {
                $("#vsoles").text(roundNumber(varTotal - varMontoTotal,2));
            }
            else {
                $("#vsoles").text("0.0");
            }

            $("#hvuelto").val($("#vsoles").text());

            varMontoPagado = roundNumber(varTotal - $("#hvuelto").val(),2);

            $("#total").text(varMontoPagado);
        }

        $("#txtMontoSoles").change(Calular);
        $("#txtMontoDolares").change(Calular);
        $("#txtMontoVisa").change(Calular);
        $("#txtMontoMastercard").change(Calular);

        $("#Boleta").click(function () {
            $("#divFactura").hide('slow');
        });

        $("#Factura").click(function () {
            $("#divFactura").show('slow');
        });

        $("#divFactura").hide();

        $("#txtMontoSoles").autoNumeric();
        $("#txtMontoDolares").autoNumeric();
        $("#txtMontoVisa").autoNumeric();
        $("#txtMontoMastercard").autoNumeric();

         $("#txtRUC").autoNumeric({vMax:'99999999999', aSep: '', mDec: 0 });


    });

</script>

<form action="PagoCuenta" method="post"">

<input type="hidden" id="Orden" name="Orden" value="@Model.IdOrden" />
<input type="hidden" id="Cuenta" name="Cuenta" value="@Model.NumeroCuenta" />

<h1>Pago de Cuenta @Model.NumeroCuenta.ToString("00000#")</h1>

<table><tr><td>

<div id="container" style="width:840px">

<div id="header" style="height:40px;">

<div id="divCambio" style="height:30px;width:410px;float:left;margin-top:10px;margin-left:10px;">
<h2>Tipo de cambio: @string.Format("{0:C}", dTipoCambio)</h2>
</div>

<div id="divTotal" style="height:30px;width:410px;float:left;text-align:right;margin-top:10px;margin-right:10px;">
    <h2>Total:  @string.Format("{0:C}", @Model.Total)</h2>
</div>

</div>

<div id="divTipoPago" style="height:300px;width:420px;float:left;">

<table style="width:100%;padding-left:70px;">
<tr>
<td style="width:20%"><img src="../../Content/Imagenes/soles.jpg" style="height:50px;"/></td>
    
<td style="width:80%">
<input id="txtMontoSoles" name="txtMontoSoles" type="text" value="0" />
</td>
</tr>

<tr>
<td style="width:20%"><img src="../../Content/Imagenes/dolares.jpg" style="height:50px;"/></td>
    
<td style="width:80%">
<input id="txtMontoDolares" name="txtMontoDolares" type="text" value="0" />
</td>
</tr>


<tr>
<td style="width:20%"><img src="../../Content/Imagenes/visa.jpg" style="height:50px;"/></td>
    
<td style="width:80%">
<br />
<input id="txtMontoVisa" name="txtMontoVisa" type="text" value="0" /><br />
<b>Número Tarjeta</b><br />
<input id="txtNumeroVisa" name="txtNumeroVisa" type="text" value="4111-1" />
</td>
</tr>


<tr>
<td style="width:20%"><img src="../../Content/Imagenes/mastercard.jpg" style="height:50px;"/></td>
    
<td style="width:80%">
<br />
<input id="txtMontoMastercard" name="txtMontoMastercard" type="text" value="0" /><br />
<b>Número Tarjeta</b><br />
<input id="txtNumeroMastercard" name="txtNumeroMastercard" type="text" value="5000-0" />
</td>
</tr>


</table>

</div>

<div id="divConsumo" style="height:300px;width:420px;float:left;">
<fieldset>
	<legend>
    <h2>CONSUMO</h2>
	</legend>
            <div>
                <div style="overflow: hidden; position: relative;
                    border: 0px; width: 100%;">

                        <table class="mGrid" cellpadding="0" cellspacing="0" border="0" style="margin-left: 0px;
                            width: 400px;">
                            <thead>
                                <tr>
                                    <th 
                                        style="width: 150px;">
                                        Producto
                                    </th>
                                    <th 
                                        style="width: 80px;">
                                        Cantidad
                                    </th>
                                    <th 
                                        style="width: 80px;">
                                        Precio
                                    </th>
                                    <th 
                                        style="width: 80px;">
                                        Importe
                                    </th>
                                </tr>
                            </thead>

                        <tbody  >
                            @{
            foreach (MvcCaja.Dal.Models.DetalleCuenta oDetalleCuenta in Model.DetalleCuenta)
            {
                                <tr>
                                    <td>
                                        @oDetalleCuenta.DetalleOrden.Producto.NombreProducto
                                    </td>
                                    <td>
                                        @oDetalleCuenta.CantidadProducto
                                    </td>
                                    <td>
                                        @String.Format("{0:C}", oDetalleCuenta.DetalleOrden.PrecioProducto)
                                    </td>
                                    <td>
                                        @String.Format("{0:C}", oDetalleCuenta.CantidadProducto * oDetalleCuenta.DetalleOrden.PrecioProducto)
                                    </td>
                                </tr>
            }
                            }
                        </tbody>
                    </table>
                </div>
            </div>
            </fieldset>
</div>

<div id="divDetalle" style="height:250px;width:420px;float:left;font-size:medium;">

<div>
<fieldset>
	<legend>
    <h2>Importes</h2>
	</legend>

	<table width="400px" border="0">
        <tr>
            <td width="5">&nbsp;</td>
            <td>S/.:</td>
            <td width="5">&nbsp;</td>
            <td><label id="soles">0.00</label></td>
             <td width="5">&nbsp;</td>
            <td>Total:</td>
            <td width="5">&nbsp;</td>
            <td><label id="total" style="font-weight:bold;">0.00</label></td>
            <td width="5">&nbsp;</td>
		</tr>
		<tr>
            <td colspan="9" class="td_alto" ></td>
        </tr>
        <tr>
            <td width="5">&nbsp;</td>
            <td>U$D:</td>
            <td width="5">&nbsp;</td>
            <td><label id="dolares">0.00</label></td>
              <td width="5">&nbsp;</td>
            <td>Vuelto S/.:</td>
            <td width="5">&nbsp;</td>
            <td><label id="vsoles" style="font-weight:bold;color:Red;">0.00</label><input type="hidden" id="hvuelto" name="hvuelto" value="0" /> </td>
            <td width="5">&nbsp;</td>
		</tr>
		<tr>
            <td colspan="9" class="td_alto"></td>
		</tr>
        <tr>
            <td width="5">&nbsp;</td>
            <td>Sub Total:</td>
            <td width="5">&nbsp;</td>
            <td><label id="subtotal">0.00</label></td>
            <td width="5">&nbsp;</td>
            <td>&nbsp;</td>
            <td width="5">&nbsp;</td>
            <td><label>&nbsp;</label></td>
            <td width="5">&nbsp;</td>
		</tr>
		<tr>
            <td colspan="9" class="td_alto"></td>
		</tr>
        <tr>
            <td width="5">&nbsp;</td>
            <td>Dcto (%):</td>
            <td width="5">&nbsp;</td>
            <td><label id="descuento">0.00</label><input type="hidden" id="valcupon" name="valcupon" /></td>
            <td width="5">&nbsp;</td>
            <td>&nbsp;</td>
            <td width="5">&nbsp;</td>
            <td><label>&nbsp;</label></td>
            <td width="5">&nbsp;</td>
		</tr>
		<tr>
            <td colspan="9" class="td_alto"></td>
		</tr>
        <tr>
            <td width="5">&nbsp;</td>
            <td>IGV:</td>
            <td width="5">&nbsp;</td>
            <td><label id="igv">0.00</label></td>
            <td width="5">&nbsp;</td>
            <td>&nbsp;</td>
            <td width="5">&nbsp;</td>
            <td><label>&nbsp;</label></td>
            <td width="5">&nbsp;</td>
		</tr>
		<tr>
            <td colspan="9" class="td_alto"></td>
		</tr>
      
		<tr>
            <td colspan="9" class="td_alto"></td>
		</tr>
	</table>

</fieldset>


</div>

</div>

<div id="divComprobante" style="height:250px;width:400px;float:left;margin-left:20px;">
<div>
<input type="radio" name="TipoComprobante" id="Boleta" value="Boleta" checked/>Boleta
<input type="radio" name="TipoComprobante" id="Factura" value="Factura" />Factura
</div>
<div id="divFactura">
<fieldset>
	<legend>
    <h2>Detalle Comprobante</h2>
	</legend>

	<table width="400px" border="0">
        <tr>
            <td width="5">&nbsp;</td>
            <td>RUC</td>
            <td width="5">&nbsp;</td>
            <td><input type="text" id="txtRUC" name="txtRuc" style="width:200px" /></td>
            <td width="5">&nbsp;</td>
		</tr>
		<tr>
            <td colspan="9" class="td_alto" ></td>
        </tr>
        <tr>
            <td width="5">&nbsp;</td>
            <td>RAZON SOCIAL</td>
            <td width="5">&nbsp;</td>
            <td><input type="text" id="txtNombre" name="txtNombre" style="width:200px" /></td>
            <td width="5">&nbsp;</td>
		</tr>
		<tr>
            <td colspan="9" class="td_alto"></td>
		</tr>
        <tr>
            <td width="5">&nbsp;</td>
            <td>DIRECCION</td>
            <td width="5">&nbsp;</td>
            <td><input type="text" id="txtDireccion" name="txtDireccion" style="width:200px" /></td>
            <td width="5">&nbsp;</td>
		</tr>
		<tr>
            <td colspan="9" class="td_alto"></td>
		</tr>
		<tr>
            <td colspan="9" class="td_alto"></td>
		</tr>
	</table>

</fieldset>
</div>
<input type="checkbox" name="chkDetalle" id="chkDetalle" checked /> Agregar Detalle de Consumo
</div>

</div>

<div id="dialogCupon">
    Numero de Cupón: <input type="text" id="txtCupon" name="txtCupon" /><input type="button" id="btnValCupon" />

    <fieldset>
	<legend>
    <h2>Numero de Cupon</h2>
	</legend>

    <p>Fecha de expiración: <span id="fe"></span></p>
    <p>Descuento: <span id="de">0</span>%</p>
    <p>Estado: <span id="es"></span></p>

    </fieldset>

</div>

<div style="margin:auto;width:100%">
<br />
<br />

<input type="submit" value="Cobrar" class="boton" onclick="return validarPago();" />
<input type="button" value="Cupón" class="boton" id="btnCupon" />

</div>
</td></tr></table>



</form>